<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>makeReactive | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.2.0">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-edit-link/plugin.css">
        
    
    

        
    
    
    <link rel="next" href="../refguide/observe.html" />
    
    
    <link rel="prev" href="../core/reactive-component.html" />
    

        
    </head>
    <body>
        
        
    <div class="book" data-level="3.1" data-basepath=".." data-revision="Thu Oct 01 2015 21:51:50 GMT+0200 (CEST)">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
        
        
        

        

        
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" >
            
            <span><b>1.</b> Introduction to Mobservable</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        Why Mobservable?
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="intro/overview.html">
            
                
                    <a href="../intro/overview.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        The Gist of Mobservable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="intro/concepts.html">
            
                
                    <a href="../intro/concepts.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        Concepts &amp; Principles
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" >
            
            <span><b>2.</b> The Basics: Making stuff Reactive</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="core/reactive-state.html">
            
                
                    <a href="../core/reactive-state.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        Reactive Data Structures
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="core/reactive-views.html">
            
                
                    <a href="../core/reactive-views.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        Reactive Views
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="core/reactive-component.html">
            
                
                    <a href="../core/reactive-component.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        Reactive Components
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" >
            
            <span><b>3.</b> Core API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="3.1" data-path="refguide/make-reactive.html">
            
                
                    <a href="../refguide/make-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        makeReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="refguide/observe.html">
            
                
                    <a href="../refguide/observe.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        observe
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="refguide/observable.html">
            
                
                    <a href="../refguide/observable.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        @observable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="refguide/reactive-component.html">
            
                
                    <a href="../refguide/reactive-component.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        @reactiveComponent
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" >
            
            <span><b>4.</b> Advanced API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="refguide/is-reactive.html">
            
                
                    <a href="../refguide/is-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        isReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="refguide/extend-reactive.html">
            
                
                    <a href="../refguide/extend-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                        extendReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="refguide/modifiers.html">
            
                
                    <a href="../refguide/modifiers.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                        modifiers
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="refguide/transactions.html">
            
            <span><b>4.4.</b> transactions</span>
            
            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="refguide/observe-async.html">
            
                
                    <a href="../refguide/observe-async.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.5.</b>
                        
                        observeAsync
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.6" data-path="refguide/observe-until.html">
            
                
                    <a href="../refguide/observe-until.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.6.</b>
                        
                        observeUntil
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.7" data-path="refguide/expr.html">
            
                
                    <a href="../refguide/expr.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.7.</b>
                        
                        expr
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8" data-path="refguide/strict.html">
            
                
                    <a href="../refguide/strict.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.</b>
                        
                        strict
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9" data-path="refguide/tojson.html">
            
                
                    <a href="../refguide/tojson.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.</b>
                        
                        toJSON
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.10" data-path="refguide/extras.html">
            
                
                    <a href="../refguide/extras.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.</b>
                        
                        debug utilities
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="5" >
            
            <span><b>5.</b> Best Practices For Large Apps</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="5.1" data-path="best/store.html">
            
                
                    <a href="../best/store.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                        Definging data stores
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.2" data-path="best/actions.html">
            
                
                    <a href="../best/actions.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                        Writing (async) actions
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.3" data-path="best/components.html">
            
                
                    <a href="../best/components.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.3.</b>
                        
                        Organizing React components
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.4" >
            
            <span><b>5.4.</b> Universal applications --&gt;</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="6" >
            
            <span><b>6.</b> How does Mobservable work?</span>
            
            
        </li>
    
        <li class="chapter " data-level="7" >
            
            <span><b>7.</b> Tips &amp; Tricks</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="7.1" data-path="best/devtools.html">
            
                
                    <a href="../best/devtools.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.1.</b>
                        
                        DevTools
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7.2" data-path="best/syntax.html">
            
                
                    <a href="../best/syntax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.2.</b>
                        
                        ES6 &amp; TypeScript goodies
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7.3" >
            
            <span><b>7.3.</b> Tracking state changes</span>
            
            
        </li>
    
        <li class="chapter " data-level="7.4" >
            
            <span><b>7.4.</b> Predicates</span>
            
            
        </li>
    
        <li class="chapter " data-level="7.5" >
            
            <span><b>7.5.</b> Performance considerations</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="8" data-path="LINKS.html">
            
                
                    <a href="../LINKS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        Resources
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" data-path="faq/faq.html">
            
                
                    <a href="../faq/faq.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        Frequently Asked Questions
                    </a>
            
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                Published with GitBook
            </a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Table of Contents"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Font Settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Share"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">
                    Share on Twitter
                </button>
                <button type="button" data-sharing="google-plus" class="button">
                    Share on Google
                </button>
                <button type="button" data-sharing="facebook" class="button">
                    Share on Facebook
                </button>
                <button type="button" data-sharing="weibo" class="button">
                    Share on Weibo
                </button>
                <button type="button" data-sharing="instapaper" class="button">
                    Share on Instapaper
                </button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Google"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
    
    
    


    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >Introduction</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <a id="edit-link" href="https://github.com/mweststrate/mobservable/tree/gh-pages/docs/refguide/make-reactive.md" class="btn fa fa-edit pull-left">&nbsp;&nbsp;Edit This Page</a><h1 id="makereactive-value-scope-name">makeReactive(value, scope?, name?)</h1>
<p><code>makeReactive</code> is to Mobservable as <code>$</code> is to jQuery.
Making data reactive starts with this function.
If data is reactive, views that depend on that data will update automatically.
In the very same way as Excel formulas update when cells on which they depend change.</p>
<p><code>makeReactive</code> provides overloads for different kinds of data.
Probably you will only use the version that takes objects.
But anyway, these are the available variations. </p>
<h2 id="primitive-values-and-references">Primitive values and references</h2>
<p>For all type of values, with the exception of <em>plain objects</em>, <em>arrays</em> and <em>functions without arguments</em> this overload is run.
<code>makeReactive</code> accepts a value and returns a getter / setter function that holds this value.
The returned function can be invoked without arguments to get the currently stored value,
or it can be invoked with one argument to update the currently stored value.</p>
<p>Furthermore you can register a callback using its <code>.observe</code> method to listen to changes on the stored value.
But usually it is more convenient to use <a href="observe.html"><code>mobservable.observe</code></a> instead.</p>
<p>So the signature of the return value of <code>makeReactive</code> is:</p>
<ul>
<li><code>func()</code> Returns the current value.</li>
<li><code>func(value)</code> Replaces the currently stored value. Notifies all observers.</li>
<li><code>func.observe(callback: (newValue, previousValue) =&gt; void, fireImmediately = false): disposerFunction</code>. Registers an observer function that will fire each time the stored value is replaced. Returns a function to cancel the observer. </li>
</ul>
<p>Example:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> cityName = makeReactive(<span class="hljs-string">&quot;Vienna&quot;</span>);

<span class="hljs-built_in">console</span>.log(cityName());
<span class="hljs-comment">// prints &apos;Vienna&apos; </span>

cityName.observe(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">newCity, oldCity</span>) </span>{
    <span class="hljs-built_in">console</span>.log(oldCity, <span class="hljs-string">&quot;-&gt;&quot;</span>, newCity);
});

cityName(<span class="hljs-string">&quot;Amsterdam&quot;</span>);
<span class="hljs-comment">// prints &apos;city: Vienna -&gt; Amsterdam&apos;</span>
</code></pre>
<h2 id="view-functions">View functions</h2>
<p>If an argumentless function is passed to <code>makeReactive</code>,
Mobservable will make sure that that function is run each time that any of the values used by the function is changed.
A new function is returned which has the same signature as the function returned for primitives, except that it is not allowed to assign a new value manually.</p>
<p>Example:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> name = makeReactive(<span class="hljs-string">&quot;John&quot;</span>);
<span class="hljs-keyword">var</span> age = makeReactive(<span class="hljs-number">42</span>);
<span class="hljs-keyword">var</span> showAge = makeReactive(<span class="hljs-literal">false</span>);

<span class="hljs-keyword">var</span> labelText = makeReactive(() =&gt; 
    showAge() ? <span class="hljs-string">`<span class="hljs-subst">${name()}</span> (age: <span class="hljs-subst">${age()}</span>)`</span> : name(); 
);

<span class="hljs-keyword">var</span> disposer = labelText.observe(newLabel =&gt; <span class="hljs-built_in">console</span>.log(newLabel));

name(<span class="hljs-string">&quot;Dave&quot;</span>);
<span class="hljs-comment">// prints: &apos;Dave&apos;</span>

age(<span class="hljs-number">21</span>);
<span class="hljs-comment">// doesn&apos;t print</span>

showAge(<span class="hljs-literal">true</span>);
<span class="hljs-comment">// prints: &apos;Dave (age: 21)&apos;</span>

age(<span class="hljs-number">42</span>);
<span class="hljs-comment">// prints: &apos;Dave (age: 42)&apos;</span>

<span class="hljs-comment">// cancel the observer</span>
disposer();

name(<span class="hljs-string">&quot;Matthew&quot;</span>);
<span class="hljs-comment">// doesn&apos;t print anymore...</span>

<span class="hljs-comment">// ... but the value can still be inspected if needed.</span>
<span class="hljs-built_in">console</span>.log(labelText());
</code></pre>
<p>Note how the function now automatically reacts to data changes,
but only if they occurred in data that was actually used to produced the output.
Hence the first change to <code>age</code> didn&apos;t result in a re-evaluation of the <code>labelText</code> function.
Mobservable will automatically determine whether the function should run <em>eagerly</em> or <em>lazily</em> based on how the views are used throughout your application,
so make sure your code doesn&apos;t rely on any side effects in those functions. </p>
<hr>
<p>These two forms of <code>makeReactive</code>, one for primitives and references, and one for functions, form the core of Mobservable.
The rest of the api is just syntactic sugar around these two core operations.
Nonetheless, you will rarely use these forms; using objects is just a tat more convenient.</p>
<h2 id="objects">Objects</h2>
<p>If a plain javascript object is passed to <code>makeReactive</code> (that is, an object that wasn&apos;t created using a constructor function), 
Mobservable will recursively pass all its values through <code>makeReactive</code>.
This way the complete object (tree) is in-place instrumented to make it observable.</p>
<p>So we can rewrite the previous example as:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> person = makeReactive({
    name: <span class="hljs-string">&quot;John&quot;</span>,
    age: <span class="hljs-number">42</span>,
    showAge: <span class="hljs-literal">false</span>,
    labelText: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.showAge ? <span class="hljs-string">`<span class="hljs-subst">${this.name}</span> (age: <span class="hljs-subst">${this.age}</span>)`</span> : <span class="hljs-keyword">this</span>.name; 
    }
};

<span class="hljs-comment">// object properties don&apos;t expose an &apos;observe&apos; method,</span>
<span class="hljs-comment">// but don&apos;t worry, &apos;mobservable.observe&apos; is even more powerful</span>
mobservable.observe(() =&gt; <span class="hljs-built_in">console</span>.log(person.labelText));

person.name = <span class="hljs-string">&quot;Dave&quot;</span>;
<span class="hljs-comment">// prints: &apos;Dave&apos;</span>

person.age = <span class="hljs-number">21</span>;
<span class="hljs-comment">// etc</span>
</code></pre>
<p>Some things to keep in mind when making objects reactive:</p>
<ul>
<li>When passing objects through <code>makeReactive</code>, only the properties that exist at the time of making the object reactive will be reactive.
Properties that are added to the object at a later time won&apos;t become reactive, unless <a href="extend-reactive.html"><code>extendReactive</code></a> is used.</li>
<li>Only plain objects will be made reactive. For non-plain objects it is considered the responsibility of the constructor to initialize the reactive properties. 
Either use the <a href="observable.html"><code>@observable</code></a> annotation or the <a href="extend-reactive.html"><code>extendReactive</code></a> function.</li>
<li>Argumentless functions will be automatically turned into views. For view <code>this</code> will be automatically bound to the object it is defined on.
However, if a function expression (ES6 / typescript) is used, <code>this</code> will be bound to undefined, so you probably want to either refer to the object directly, or use a classic function.</li>
<li><code>makeReactive</code> is applied recursively, both on instantiation and to any new values that will be assigned to reactive properties in the future.</li>
<li>These defaults are fine in 95% of the cases, but for more fine-grained on how and which properties should be made reactive, see the <a href="modifiers.html">modifiers</a> section. </li>
</ul>
<h2 id="arrays">Arrays</h2>
<p>Similar to objects, arrays can be made reactive using <code>makeReactive</code>.
This works recursively as well, so all (future) values of the array will be reactive as well.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> todos = makeReactive([
    { title: <span class="hljs-string">&quot;Spoil tea&quot;</span>, completed: <span class="hljs-literal">true</span> },
    { title: <span class="hljs-string">&quot;Make coffee&quot;</span>, completed: <span class="hljs-literal">false</span> }
]);

mobservable.observe(() =&gt; {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;Remaining:&quot;</span>, todos
        .filter(todo =&gt; !todo.completed)
        .map(todo =&gt; todo.title)
        .join(<span class="hljs-string">&quot;, &quot;</span>)
    );
});
<span class="hljs-comment">// Prints: &apos;Remaining: Make coffee&apos;</span>

todos[<span class="hljs-number">0</span>].completed = <span class="hljs-literal">false</span>;
<span class="hljs-comment">// Prints: &apos;Remaining: Spoil tea, Make coffee&apos;</span>

todos[<span class="hljs-number">2</span>] = { title: <span class="hljs-string">&apos;Take a nap&apos;</span>, completed: <span class="hljs-literal">false</span> };
<span class="hljs-comment">// Prints: &apos;Remaining: Spoil tea, Make coffee, Take a nap&apos;</span>

todos.shift();
<span class="hljs-comment">// Prints: &apos;Remaining: Make coffee, Take a nap&apos;</span>
</code></pre>
<p>Due to limitations of native arrays in ES5 (<code>array.observe</code> is only available in ES7, and arrays cannot be extend),
<code>makeReactive</code> will instrument a clone of the provided array instead of the original one.
In practice, these arrays work just as fine as native arrays and all native methods are supported, including index assignments, up-to and including the length of the array.</p>
<p>Bear in mind that <code>Array.isArray(makeReactive([]))</code> will yield <code>false</code>, so whenever you need to pass an reactive array to an external library,
it is a good idea to <em>create a shallow copy before passing it to other libraries or built-in functions</em> (which is good practice anyway). So <code>Array.isArray(makeReactive([]).slice())</code> will yield <code>true</code>.</p>
<p>Besides all built-in functions, the following goodies are available as well on reactive arrays:</p>
<ul>
<li><code>observe(listener, fireImmediately? = false)</code> Listen to changes in this array. The callback will receive arguments that express an array splice or array change, conforming to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/observe" target="_blank">ES7 proposal</a>. It returns a disposer function to stop the listener.</li>
<li><code>clear()</code> Remove all current entries from the array.</li>
<li><code>replace(newItems)</code> Replaces all existing entries in the array with new ones.</li>
<li><code>find(predicate: (item, index, array) =&gt; boolean, thisArg?, fromIndex?)</code> Basically the same as the ES7 <code>Array.find</code> proposal, except for the additional <code>fromIndex</code> parameter.</li>
<li><code>remove(value)</code> Remove a single item by value from the array. Returns <code>true</code> if the item was found and removed.</li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../core/reactive-component.html" class="navigation navigation-prev " aria-label="Previous page: Reactive Components"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../refguide/observe.html" class="navigation navigation-next " aria-label="Next page: observe"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-ga/plugin.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-disqus/plugin.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-edit-link/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2},"edit-link":{"base":"https://github.com/mweststrate/mobservable/tree/gh-pages/docs","label":"Edit This Page"},"ga":{"token":"UA-65632006-1","configuration":"auto"},"disqus":{"shortName":"mobservable"}};
    gitbook.start(config);
});
</script>

        <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-65632006-1', 'auto');ga('send', 'pageview');</script>
    </body>
    
</html>
